<template>
    <div>
        <el-row>
            <el-button :type="mode" @dblclick.native="buttondb">{{buttonMode}}</el-button>
        </el-row>
        <el-dialog
                title="提示"
                :visible.sync="buttonVisible"
                width="40%"
                :before-close="handleClose">
            <span>{{modeText}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="buttonVisible = false">取 消</el-button>
                <el-button type="primary" @click="buttonVisibleClick">确 定</el-button>
            </span>
        </el-dialog>
        <ul>
            <li v-for="(item,index) in boxs" :class="item.status"
                @dblclick="dbClick(index)">{{item.position}}</li>
        </ul>
        <!--before-close此处只有点击了其他地方才起作用-->
        <!--作为清空货位的提示框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose">
            <span>{{msggo}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleClick">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    import {request} from '../network/request'
    import axios from "axios";
    /*setInterval(function () {
        alert(98989);
    },1000)*/
    export default {
        name: "wms",
        data() {
            return {
                boxs:[],
                websock:null,
                dialogVisible: false,
                index:-1,
                mode:'success',
                buttonMode:'清空模式',
                modeText:'确定切换到禁用模式?',
                buttonVisible:false,
                msggo:'确定清空该货位?'
            }
        },
        /*vue的钩子函数，在初始化时建立websocket的连接*/
        created() {
            this.initWebSocket();
        },
        destroyed() {
            this.websocketclose();
        },
        /*beforeRouteLeave(to,from,next){

        },*/
        methods: {
            initWebSocket(){
                console.log("创建WebSocket")
                this.websock = new WebSocket("ws://127.0.0.1:9998/websocket/ydsj")
                this.websock.onmessage = this.websocketonmessage
                this.websock.onerror = this.websocketonerror
                this.websock.onopen = this.websocketonopen
                this.websock.onclose = this.websocketclose
            },
            // 连接建立之后执行send方法发送数据
            websocketonopen () {
                //this.websocketsend();
                /*每次重新建立连接都发送一次请求去请求数据库数据,通过websocket来发送数据至前端*/
                axios({
                    url:'http://127.0.0.1:9998/showList'
                }).then(data=>{
                    console.log(data.data)
                })
                console.log( 'WebSocket连接成功，初次连接');
            },
            websocketonerror () {
                console.log( 'WebSocket连接失败');
            },
            // 数据接收
            websocketonmessage (e) {
                console.log('数据接收' + e.data);
                console.log('数组的长度为'+this.boxs.length);
                /*JSON.parse(e.data);将json格式的字符串转换为对象*/
                /*JSON.stringify(object)对象转换为JSON格式字符串*/
                let result = JSON.parse(e.data);
                if (this.boxs.length<10){
                    for (let box of result){
                        this.boxs.push(box)
                    }
                }else{
                    this.boxs.splice(0,this.boxs.length);
                    for (let box of result){
                        this.boxs.push(box)
                    }
                }
            },
            // 数据发送
            websocketsend () {
                this.websock.send('发我数据呗');
            },
            // 关闭
            websocketclose (e) {
                console.log('已关闭连接', e);
            },
            dbClick(index){
                /*
                * 双击发生的事情如下:
                * 1.改变数据库的更新
                * 2.更新过后服务器主动发送数据至客户端[但是如果刷新页面就不必这样做了，先这样做]
                * */
                /*此处双击表示清空货位,模式的问题后来加入[模式不进行持久化，因为没有必要，变化了也不要紧，放入缓存中]*/
                if(this.mode=='success' && this.buttonMode=='清空模式'){
                    this.msggo='确定清空该货位?';
                }else if(this.mode=='danger' && this.buttonMode=='禁用模式'){
                    this.msggo='确定禁用该货位?';
                }
                this.dialogVisible=true;
                this.index=index;
            },
            /*点击是之后就发送更新事件*/
            dialogVisibleClick(){
               /* alert(this.index);*/
                if(this.mode=='success' && this.buttonMode=='清空模式'){
                    axios({
                        url:'http://127.0.0.1:9998/changeListToNO?index='+this.index
                    }).then(data=>{
                        console.log('你终于双击了我'+data.data)
                    }).catch(ere=>{
                        console.log(ere);
                    })
                }else if(this.mode=='danger' && this.buttonMode=='禁用模式'){
                    axios({
                        url:'http://127.0.0.1:9998/changeListToNOUSE?index='+this.index
                    }).then(data=>{
                        console.log('你终于双击了我'+data.data)
                    }).catch(ere=>{
                        console.log(ere);
                    })
                }

                this.dialogVisible=false;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            buttondb(){
                if(this.mode=='success' && this.buttonMode=='清空模式'){
                    this.modeText='确定切换到禁用模式?';
                }else if(this.mode=='danger' && this.buttonMode=='禁用模式'){
                    this.modeText='确定切换到清空模式?';
                }
                this.buttonVisible=true;
            },
            buttonVisibleClick(){
                if(this.mode=='success' && this.buttonMode=='清空模式'){
                    this.mode='danger';
                    this.buttonMode='禁用模式';
                }else if(this.mode=='danger' && this.buttonMode=='禁用模式'){
                    this.mode='success';
                    this.buttonMode='清空模式';
                }
                this.buttonVisible=false;
            }
        }
        /*watch: {
            boxs: {
                handler(newName, oldName) {

                },
                /!*深度监听，可以监听到每一个变化*!/
                deep: true,
                /!*首次是否监听*!/
                immediate: true
            }
        },
        */
    }
    /*alertify的使用*/



</script>

<style scoped>

    @keyframes fade{
        from{
            opacity: 1.0;
        }
        50%{
            opacity: 0.2;
        }
        to{
            opacity: 1.0;
        }
    }
    @-webkit-keyframes fade {
        from{
            opacity: 1.0;
        }
        50%{
            opacity: 0.2;
        }
        to{
            opacity: 1.0;
        }
    }
    ul li{
        display: inline-block;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        margin-left: 100px;
        margin-top: 30px;
        border:1px solid white;
    }
    .NO{
        background-color: green;
    }
    .YES{
        background-color: red;
    }
    .FROMUSE{
        background-color: rebeccapurple;
        animation: fade 600ms infinite;
        -webkit-animation: fade 600ms infinite;
    }
    .TOUSE{
        background-color: chartreuse;
        animation: fade 600ms infinite;
        -webkit-animation: fade 600ms infinite;
    }
    .NOUSE{
    background-color:white;
    color:black;
    border:1px dashed black;
    }

    /*.el-row {
        margin-bottom: 20px;
        &:last-child {
         margin-bottom: 0;
     }
    }*/
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>